<template>
  <el-row>
    <el-col>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>数据仓库</el-breadcrumb-item>
        <el-breadcrumb-item>资源信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card shadow="hover" class="xx">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form :inline="true" class="query-form-inline" @submit.prevent>
              <el-input
                v-model="queryInfo"
                placeholder="资源信息检索"
                :prefix-icon="Search"
                @keyup.enter="query"
              />
            </el-form>
            <ElmIntfTable
              :intfs="intfData"
              :loading="intfLoading"
              class="main-scrollbar"
              :col-indexs="{
                name: true,
                code: true,
                new: true,
                edit: true,
                delete: true,
              }"
              @edit-row="editRow"
              @sort-change="sortChange"
              @delete-row="deleteRow"
            />
          </el-col>
          <el-col :span="16">
            <transition name="el-zoom-in-top">
              <el-row v-show="editShow">
                <el-col>
                  <ElmIntfEdit
                    v-model:intf="intf"
                    :intfs="intfData"
                    @commit="editCommit"
                    @cancel="editCancel"
                  />
                </el-col>
              </el-row>
            </transition>
          </el-col>
        </el-row>
        <el-row>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            background
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listCount"
            @size-change="query"
            @current-change="query"
          />
        </el-row>
      </el-card>
      <HelloWorld />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ArrowRight, Search } from "@element-plus/icons-vue";
import { IntfApi } from "@/apis/home";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Intf } from "@/components/elm/ElmIntfEdit";

const intfData = ref<Intf[]>(),
  intfLoading = ref(true),
  queryInfo = ref(""),
  currentPage = ref(1),
  pageSize = ref(50),
  listCount = ref(0),
  orderKey = ref(""),
  order = ref(""),
  editShow = ref(false),
  intf = ref({} as Intf);

const query = () => {
    intfLoading.value = true;
    let params: string[] = [];
    if (queryInfo.value) {
      params.push("Name=" + queryInfo.value);
    }
    params.push("Query.Size=" + pageSize.value);
    params.push("Query.Page=" + currentPage.value);
    if (orderKey.value) {
      params.push("Query.OrderKey=" + orderKey.value);
    }
    if (order.value) {
      params.push("Query.Order=" + order.value);
    }
    IntfApi("?" + params.join("&"), false)
      .then((res) => {
        if (200 == res.status && 200 == res.data.code) {
          let data = res.data.data;
          let query = data.query;
          currentPage.value = query.page;
          pageSize.value = query.size;
          listCount.value = query.total;
          intfData.value = data.list;
          intfLoading.value = false;
        } else {
          ElMessage.error(res.data.msg);
        }
      })
      .catch((err) => {
        ElMessage.error("获取资源信息出现错误！");
      });
  },
  sortChange = (column: any) => {
    let keys = column.prop.split(".");
    orderKey.value = keys[keys.length - 1];
    order.value = column.order;
    query();
  },
  editRow = (row: any) => {
    if (row) intf.value = { ...row };
    else intf.value = ref({} as Intf).value;
    editShow.value = true;
  },
  deleteRow = (row: any) => {
    query();
  },
  editCommit = (row: Intf) => {
    query();
  },
  editCancel = () => {
    editShow.value = false;
    query();
  };

query();
</script>

<style lang="scss" scoped>
.main-scrollbar {
  height: calc(100vh - 368px);
}
.utable-scrollbar {
  height: calc(100vh - 839px);
}
.xx {
  margin-top: 8px;
}
</style>
